<template>
  <div>
    <h1>维修进度查询</h1>
    <el-card>
      <el-table :data="repairList" style="width: 100%">
        <el-table-column prop="id" label="工单ID" width="100" />
        <el-table-column prop="description" label="故障描述" />
        <el-table-column prop="reportTime" label="报修时间" width="180" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="维修人员" width="120">
          <template #default="scope">
            {{ scope.row.repairUserName || '未分配' }}
          </template>
        </el-table-column>
        <el-table-column prop="assignTime" label="分配时间" width="180" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listRepairorder } from '@/api/repairorder'
import { getUser } from '@/api/user'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const repairList = ref([])

const getStatusText = (status) => {
  const statusMap = {
    0: '待处理',
    1: '维修中',
    2: '维修完成',
    3: '已归档'
  }
  return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'warning',
    2: 'success',
    3: ''
  }
  return typeMap[status] || ''
}

const fetchRepairList = async () => {
  try {
    const response = await listRepairorder()
    const filteredList = response.filter(item => item.userId === userStore.userId)
    
    // 为每个维修工单获取维修人员姓名
    for (const item of filteredList) {
      if (item.repairUserId) {
        try {
          const res = await getUser(item.repairUserId)
          item.repairUserName = res.userName
        } catch (error) {
          console.error('获取维修人员信息失败:', error)
          item.repairUserName = '未知'
        }
      } else {
        item.repairUserName = '未分配'
      }
    }
    
    repairList.value = filteredList
  } catch (error) {
    console.error('获取维修工单列表失败:', error)
  }
}

onMounted(() => {
  fetchRepairList()
})
</script>

<style scoped>
.el-card {
  margin-top: 20px;
}
</style>